
	<!doctype html>
	<html lang="zh-CN">

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta name="description" content="">
		<meta name="author" content="xuejianxinokok">
		<title>NODE测试</title>
		<link rel="stylesheet" href="../resources/css/bootstrap.min.css" />
		<link rel="stylesheet" href="../resources/css/dashboard.css" />
		<link rel="stylesheet" href="../resources/css/my.css" />
		<!-- import stylesheet -->
		<link rel="stylesheet" href="https://unpkg.com/view-ui-plus/dist/styles/viewuiplus.css">
		<!-- import View UI Plus -->
		
		<meta name="theme-color" content="#7952b3">


		<style>
			.bd-placeholder-img {
				font-size: 1.125rem;
				text-anchor: middle;
				-webkit-user-select: none;
				-moz-user-select: none;
				user-select: none;
			}

			@media (min-width: 768px) {
				.bd-placeholder-img-lg {
					font-size: 3.5rem;
				}
			}

			.b-example-divider {
				height: 3rem;
				background-color: rgba(0, 0, 0, .1);
				border: solid rgba(0, 0, 0, .15);
				border-width: 1px 0;
				box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
			}

			.b-example-vr {
				flex-shrink: 0;
				width: 1.5rem;
				height: 100vh;
			}

			.bi {
				vertical-align: -.125em;
				fill: currentColor;
			}
		</style>



	</head>

	<body>
		<div id="app">
			<!--参考文档 https://v5.bootcss.com/docs/5.1/getting-started/introduction/-->
			<header class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow">
				<a class="navbar-brand col-md-3 col-lg-2 me-0 px-3" href="#">node测试</a>
				<button class="navbar-toggler position-absolute d-md-none collapsed" type="button"
					data-bs-toggle="collapse" data-bs-target="#sidebarMenu" aria-controls="sidebarMenu"
					aria-expanded="false" aria-label="Toggle navigation">
					<span class="navbar-toggler-icon"></span>
				</button>
				<input class="form-control form-control-dark w-100" type="text" placeholder="查询" aria-label="Search">
			</header>

			<div class="container-fluid">
				<div class="row">
					<nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
						<div class="position-sticky pt-3">
							<ul class="nav flex-column">
								<li class="nav-item">
									<a class="nav-link" :class="{active: currentTabComponent == 'home-page' }" aria-current="page" href="#"
										@click="changeTabMenu('home-page')">
										<span data-feather="home"></span>
										首页
									</a>
								</li>
								<li class="nav-item">
									<a class="nav-link" :class="{active: currentTabComponent == 'order-page' }" aria-current="page" href="#"
										@click="changeTabMenu('order-page')">
										<span data-feather="home"></span>
										排序
									</a>
								</li>
							</ul>
						</div>
					</nav>
					<!-- 数据行 -->
					<main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
						<i-button @click="show">Click me!</i-button>
    <Modal v-model="visible" title="Welcome">Welcome to View UI Plus</Modal>
						<!-- <home-page></home-page> -->
						<component v-bind:is="currentTabComponent"></component>
					</main>
				</div>
			</div>


		</div>

		<script src="../resources/js/http.js"></script>
		<script src="../resources/js/vue.global.prod.js"></script>
		<script src="../resources/js/bootstrap.bundle.min.js"></script>
		<script src="../resources/js/feather.min.js"></script>
		<script src="https://unpkg.com/view-ui-plus"></script>

		<script type="module">
			(function () {
				'use strict'
				feather.replace({ 'aria-hidden': 'true' })
			})()

			import {homepage} from './components/homepage.js'
			import {orderpage} from './components/orderpage.js'
			import {page} from './components/page.js'

			
			const app = Vue.createApp({
				data() {
					return {
						//列表数据
						currentTabComponent : 'home-page',
						visible: false
					}
				},
	
				mounted: function () {
					//this.queryAll()
				},
	
				methods: {
					changeTabMenu(menuCode){
						this.currentTabComponent = menuCode
					},
					show () {
                this.visible = true;
            }
				}
			}).component('home-page', homepage).component('order-page', orderpage).component('page', page).use(ViewUIPlus).mount('#app');
		</script>
	</body>

	</html>
